<template>
    <div class="ratingItem">
        <div class="item-wrapper">
            <div class="item-avatar">
                <img :src="rating.avatar" alt="">
            </div>
            <div class="item-content">
                <div class="item-username">{{rating.username}}</div>
                <div class="item-star">
                    <star :score="rating.score" :size="size"></star>
                    <span class="item-delivery" v-show="rating.deliveryTime">{{rating.deliveryTime}}分钟送达</span>
                </div>
                <div class="rating-text">{{rating.text}}</div>
                <div class="recommend-list">
                    <span class="starRating" :class="rating.rateType ? 'icon-thumb_down' : 'icon-thumb_up'" ></span>
                    <span class="recommend" v-for="(recommend, index) in rating.recommend" :key="index">
                        <span class="recommend-item">{{recommend}}</span>
                    </span>
                </div>
            </div>
            <div class="rating-time">
                <span class="date">{{ratingDate}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import star from './star.vue';
export default {
    data() {
        return {
            size: 24
        }
    },
    props:{
        rating: {
            type: Object
        },
        onlyRating: {
            type: Boolean
        }
    },
    created() {
        // console.log(this.rating);
    },
    methods: {
        formatTime (time) {
            if(time > 0 && time < 10){
                return "0" + time;
            }
            return time
        }
    },
    computed : {
        ratingDate() {
            var date = new Date(this.rating.rateTime);
            var year = this.formatTime(date.getFullYear());
            var month = this.formatTime(date.getMonth() + 1);
            var day = this.formatTime(date.getDate());
            var hour = this.formatTime(date.getHours());
            var minutes = this.formatTime(date.getMinutes());
            return year + "-" + month + "-" + day + " " + hour + ":" + minutes;
        }
    },
    components: {
        star
    }
}
</script>

<style lang="stylus" ref="stylesheet/stylus">
@import "../assets/stylus/index.styl"

.ratingItem
    background-color #fff
    // box-sizing border-box
    padding 18px 18px 0
    .item-wrapper
        border-1px(rgba(7, 17, 27, .1))
        position relative
        padding-bottom 18px
        .item-avatar
            width 28px
            height 28px
            border-radius 50%
            position absolute
            top 0
            left 0
            img
                width 28px
                height 28px
                border-radius 50%
        .item-content
            margin-left 40px
            .item-username
                font-size 10px
                color rgb(7, 17, 27)
                line-height 24px
                font-weight 500
            .item-star
                display flex
                align-items center
                margin-top 4px
                .item-delivery
                    font-size 10px
                    font-weight 200
                    color rgb(147, 153, 159)
                    line-height 12px
                    vertical-align middle
                    margin-left 6px
            .rating-text
                font-size 12px
                color rgb(7, 17, 27)
                line-height 18px
                margin-top 6px
        .recommend-list
            margin-top 8px
            .starRating
                font-size 12px
                color rgb(147, 153, 159)
                line-height 16px
                vertical-align top
                &.icon-thumb_up
                    color #00a0dc
            .recommend
                margin-left 8px
                .recommend-item
                    display inline-block
                    font-size 9px
                    width 60px
                    color rgb(147, 153, 159)
                    line-height 16px
                    border 1px solid rgba(7, 17, 27, .1)
                    box-sizing border-box
                    padding 0 6px
                    white-space nowrap
                    text-overflow ellipsis
                    overflow hidden
                    vertical-align top
        .rating-time
            position absolute
            right 0
            top 0
            font-size 10px
            font-weight 200
            color rgb(147, 153, 159)
            line-height 24px
            vertical-align middle

</style>
